<template>
    <div class="pd-30">
      <div class="header">
        <div class="flex">
          <div class="center">
            <el-input
                class="w-200"
                style="margin-right: 50px"
                v-model="input"
                placeholder="学生名"
              ></el-input>
          </div>
          <div class="flex">
            <div class="center">
              <el-input
                class="w-200"
                style="margin-right: 50px"
                v-model="input"
                placeholder="课时"
              ></el-input>
            </div>
            <el-select
              style="margin-right: 50px"
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="flex header_bot">
          <div></div>
          <div class="flex">
            <div class="center" style="margin-right: 50px">
              <el-button plain class="w-150">重置</el-button>
            </div>
            <div class="center" style="margin-right: 50px">
              <el-button type="primary" class="w-150">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="box_cen">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            fixed
            align="center"
            type="index"
            label="编号"
            width="100"
          >
          </el-table-column>
          <el-table-column
            fixed
            align="center"
            prop="name"
            label="学科"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="name" align="center" label="课时" width="120">
          </el-table-column>
          <el-table-column prop="address" align="center" label="库存" width="120">
          </el-table-column>
          <el-table-column prop="address" align="center" label="费用" width="120">
          </el-table-column>
          <el-table-column prop="city" align="center" label="年级" width="120">
          </el-table-column>
          <el-table-column prop="city" align="center" label="状态" width="100">
          </el-table-column>
          <el-table-column prop="city" align="center" label="分配交付中心" width="150">
          </el-table-column>
          <el-table-column prop="date" align="center" label="创建时间" width="150">
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Onlinestudents",
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
        value: "",
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1517 弄",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1519 弄",
            zip: 200333,
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1516 弄",
            zip: 200333,
          },
        ],
      };
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
    },
  };
  </script>
  <style scoped>
  .header {
  }
  .header_bot {
    margin-top: 40px;
  }
  .box_cen {
    margin-top: 50px;
  }
  </style>